/* Button */

.button {
  background-color: var(--base);
  border-radius: 4px;
  padding: 9px 12px;
  border: none;
  font-size: 16px;
  line-height: 100%;
  cursor: pointer;
}

.button.accent {
  background-color: var(--accent-color);
  color: var(--base);
}

.button.secondary {
  background-color: var(--secondary-color);
}

.button.primary {
  background-color: var(--primary-color);
  color: var(--base);
}

.button.transparent {
  background-color: transparent;
}

.button:disabled {
  background-color: var(--gray);
}

.button.transparent:disabled {
  background-color: transparent;
  color: var(--gray);
}

.button.icon {
  padding: 6px;
  border-radius: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button.icon:disabled {
  background-color: var(--base);
}

.button.icon:disabled svg > path {
  fill: var(--gray);
}

.button.icon:hover {
  background-color: var(--secondary-color);
}
